I have a large loop during that I want to show "v-progress-linear" like so:
<template>
<div>
<v-btn
color="success"
@click="allRun()"
>
Run
</v-btn>
<v-dialog
v-model="dialog"
hide-overlay
persistent
>
<v-card
color="primary"
dark
>
<v-card-text>
Please stand by
<v-progress-linear
indeterminate
></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
data () {
return {
dialog: false
}
},
methods: {
allRun: function () {
this.editorRun()
this.dialog = true
},
editorRun () {
for (var i = 0; i < this.listModes.length; i++) {
// do something...
}
this.dialog = false
}
}
</script>
however, my "v-progress-linear" is always executed after the loop, even when I initiate it in the editorRun() before executing the loop.
How do I start "v-progress-linear" before executing a loop and disable after loop?
You may rewrite your component using async/await like this:
<template>
<v-app>
<div>
<v-btn color="success" @click="allRun()"> Run </v-btn>
<v-dialog v-model="dialog" hide-overlay persistent>
<v-card>
<v-card-text>
Please stand by
<v-progress-linear indeterminate></v-progress-linear>
</v-card-text>
</v-card>
</v-dialog>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
dialog: false,
listModes: [1, 2, 3],
};
},
methods: {
allRun() {
this.dialog = true;
this.editorRun();
},
async editorRun() {
for (const item of this.listModes) {
await this.longTask(item);
}
this.dialog = false;
},
async longTask(item) {
await new Promise(resolve => setTimeout(resolve, 500));
}
},
};
</script>